<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<style type="text/css">

body {
    display: block;
    margin: 0px;
}
.el-submenu__title i {
    color: #ffffff !important;
}

#app {
	/* height: 100vh;
	width: 100vw; */
}

.el-main {
    height: calc(100vh - 120px);
}
</style>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
	<div id="app">
		<el-container>
			<el-header>
				<el-menu
				  :default-active="activeIndex"
				  class="el-menu-demo"
				  mode="horizontal"
				  @select="handleSelect"
				  background-color="#409EFF"
				  text-color="#fff"
				  active-text-color="#ffd04b">
				  <el-menu-item index="1">代码生成</el-menu-item>
				  <el-menu-item index="1.1">镜像构建</el-menu-item>
				  <el-submenu index="2">
				    <template slot="title" disabled>项目部署</template>
				    <el-menu-item index="2-1">部署正式K8s</el-menu-item>
				    <el-menu-item index="2-2">部署测试K8s</el-menu-item>
				    <el-menu-item index="2-3">部署到tomcat</el-menu-item>
				  </el-submenu>
				  <el-menu-item index="3"><a style="text-decoration: unset;" href="https://www.ele.me" target="_blank">日志报警</a></el-menu-item>
				</el-menu>
			</el-header>
			
			<el-main>
			 <el-table
			    v-loading="loading"
			    element-loading-text="拼命加载中"
			    element-loading-spinner="el-icon-loading"
			    element-loading-background="rgba(0, 0, 0, 0.8)"
			    :data="tableData"
			    style="width: 100%">
			    <el-table-column
			      prop="name"
			      label="表名"
			      width="180">
			    </el-table-column>
			    <el-table-column
			      label="前端模块">
			      	 <template slot-scope="scope">
						  <el-checkbox-group v-model="scope.row.frontendModuleList" >
						    <el-checkbox label="pclist" @change="showDetail">列表(桌面)</el-checkbox>
						    <el-checkbox label="mlist" >列表(手机)</el-checkbox>
						    <el-checkbox label="detail">详情</el-checkbox>
						    <el-checkbox label="chart" >报表(手机)</el-checkbox>
						  </el-checkbox-group>
			      	 </template>
			    </el-table-column>
			  </el-table>
			</el-main>
			<el-footer>
			<el-button type="primary">生成</el-button>
			</el-footer>
		</el-container>
		
		<el-drawer
		  title="模块配置详情"
		  :with-header="false"
		  :visible.sync="drawer"
		  :direction="direction"
		  :before-close="handleClose">
		  <h3>内置标题</h3>
		  <div>内容</div>
		</el-drawer>

	</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
new Vue({
    el: '#app',
    data: function() {
      return { 
    	  visible: false ,
    	  activeIndex: '1',
    	  tableData: [
    		{
                name: 'mytable',
                frontendModuleList: []
            },
            {
                name: 'mytable2',
                frontendModuleList: []
            },
            
    	  ],
            loading: false,
            drawer: false,
            direction: 'rtl',
    	  }
    },
    methods: {
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
        errorNotify() {
            this.$notify({
              title: '警告',
              message: '【HR人事管理】项目报错，需要关注',
              duration: 4000
            });
          },
          showDetail(r) {
        	  if(r) {
        	  this.drawer = true;
        	  }
          },
          handleClose(done) {
              this.$confirm('是否保存？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
            }
      },
      created() {
    	  this.errorNotify() ;
        },
  })
</script>
</html>